<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8' />
  <title>Along</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script include="turf" src="./static/libs/include-openlayers-local.js"></script>

  <style>
    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id='map'></div>
  <script>
    var map = new ol.Map({
      //地图容器div的ID
      target: 'map',
      //地图容器中加载的图层
      layers: [],
      //地图视图设置
      view: new ol.View({
        //地图初始中心点
        center: ol.proj.fromLonLat([116, 30]),
        //地图初始显示级别
        zoom: 4,
        //最小级别
        minZoom: 1,
        //最大级别
        maxZoom: 20
      })
    });

    var geojson;

    var origin = [89.341, 30.92];
    var destination = [133.989, 30.92];

    var startPoint = [];
    var endPoint = [];
    var route = {
      "type": "FeatureCollection",
      "features": [{
        "type": "Feature",
        "geometry": {
          "type": "LineString",
          "coordinates": [
            origin,
            destination
          ]
        }
      }]
    };
    var simpleLine = {
      "type": "FeatureCollection",
      "features": [{
        "type": "Feature",
        "geometry": {
          "type": "LineString",
          "coordinates": [
            origin,
            destination
          ]
        }
      }]
    };


    initMap();
    alongLine();
    updateView();

    function initMap() {
      map.addLayer(new ol.layer.Tile({
        source: new ol.source.TileImage({
          url: 'https://api.tiles.mapbox.com/v4/mapbox.light/{z}/{x}/{y}.png?access_token=' +
            'sk.eyJ1IjoiY2hlbmdkYWRhIiwiYSI6ImNqZDFjaGo0ZjFzcnoyeG54enoxdnNuZHUifQ.hTWXXBUQ0wdGeuDF3GWeUw'
        })
      }))
    }

    function alongLine() {
      var lineDistance = turf.distance(origin, destination, {
        units: 'kilometers'
      });

      var arc = [];
      var count = 100; //插入100个点
      var clip = lineDistance / count; //用于下面的循环

      for (var i = 0; i < lineDistance; i += clip) {
        //计算对应第i个插值点的位置
        var segment = turf.along(route.features[0], i, {
          units: 'kilometers'
        });
        //将插值点加入到原始数据中
        arc.push(segment.geometry.coordinates);
      }
      arc.push(destination); //补上终点
      //更新数据
      route.features[0].geometry.coordinates = arc;
    }

    function updateView() {
      var source = new ol.source.Vector();
      var originsource = new ol.source.Vector();

      let oljson = new ol.format.GeoJSON();

      route.features.forEach(function (line) {
        let feature = oljson.readFeature(line);
        feature.getGeometry().transform('EPSG:4326', 'EPSG:3857');
        source.addFeature(feature);
      });

      simpleLine.features.forEach(function (line) {
        let feature = oljson.readFeature(line);
        feature.getGeometry().transform('EPSG:4326', 'EPSG:3857');
        originsource.addFeature(feature);
      });      

      map.addLayer(new ol.layer.Vector({
        source: source,
        style: function () {
          return new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: 'red',
              width: 15
            })
          })
        }
      }))

      map.addLayer(new ol.layer.Vector({
        source: originsource,
        style: function () {
          return new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: 'blue',
              width: 5
            })
          })
        }
      }))
    }
  </script>
</body>

</html>